import { componentConfigGroup } from '@/components/editor';
import { Typography } from 'antd';
import { FC } from 'react';
import style from './index.module.scss';
import { useEditorStore } from '@/store/editor';
import { nanoid } from 'nanoid';
import { ComponentConfig, ComponentInfo } from '@/components/editor';

const { Title } = Typography;

const Lib: FC = () => {
  const { add } = useEditorStore();

  function addComponent(item: ComponentConfig) {
    const componentInfo: ComponentInfo = {
      fe_id: nanoid(),
      title: item.title,
      props: item.defaultProps,
      type: item.type,
      isHidden: false,
    };
    add(componentInfo);
  }

  function getComponent(item: ComponentConfig) {
    const { Component, defaultProps } = item;

    return (
      <div
        className={style.wrapper}
        onClick={() => addComponent(item)}
        key={item.type}
      >
        <div className={style.dis}>
          <Component {...defaultProps} />
        </div>
      </div>
    );
  }

  return (
    <div className={style.container}>
      {componentConfigGroup.map((group) => {
        const { groupId, groupName, components } = group;

        return (
          <div className={style['group-container']} key={groupId}>
            <Title level={5} className={style.title}>
              {groupName}
            </Title>

            <div>{components.map((item) => getComponent(item))}</div>
          </div>
        );
      })}
    </div>
  );
};

export default Lib;
